<template>
<div>
	<my-header></my-header>
    <div class="breadcrumb">
			<a href="/">结婚</a>
			&gt;
			<a href="hunpin">结婚用品</a>
		</div>
	<div class="content clearfix">
		<div class="content-left fl">
			<div class="newbox-0617">
				<div class="tag0617-box1 " style="margin-top: 0;" v-for="(item,i) of cates" :key=i>
					<a href="/hunpin/list_569">
						<img class="shop_category_img" src="https://qnm.hunliji.com/o_1evocmuvl2jk1nou5lq1f9k1vsi9.png" alt="伴手礼">
					</a>
					<dl>
						<a href="/hunpin/list_569">
							<dt class="me0802-1">{{item.cname}}</dt>
						</a>
						<dd>
							<div>
								<router-link to="/shoppingcategory" target="_blank" v-for="(subcat,k) of subcats[i]" :key=k>{{subcat.dname}}</router-link>
							</div>
						</dd>
					</dl>
				</div>
				
			</div>
			<div class="ctl-header clearfix" style="overflow: visible;padding-right: 0;border-width: 1px;">
				<dd class="leihz1">
					<a class="on" href="/hunpin?order=0">默认排序</a>
					<span class="hLine"></span>
					<a class="" href="/hunpin?order=1">最新发布</a>
					<span class="hLine"></span>
					<a class="" href="/hunpin?order=2">价格最高</a>
					<span class="hLine"></span>
					<a class="" href="/hunpin?order=3">价格最低</a>
					<span class="hLine"></span>
					<a class="" href="/hunpin?order=4">最多喜欢</a>
				</dd>
				<!-- :after -->
			</div>
			<div class="ctl-hplist clearfix">
				<dl v-for="(item,i) in commodity.slice(0,16)" :key="i">
					<dt>
						<router-link rel="nofollow" :to="`/shoppinglist/${item.lid}`"  target="_blank">
							<img :src="item.img"
								:alt="item.title">
						</router-link>
					</dt>
					<dd>
						<p>
							<router-link rel="nofollow" :to="`/shoppinglist/${item.lid}`" target="_blank">{{item.title}}</router-link>
						</p>
						<p class="price clearfix">
							<i class="fl">
								¥
								<em>{{item.price}}</em>
							</i>
							<span class="fr">
								<!-- ::before -->
								165
							</span>
							<!-- ::before -->
						</p>
					</dd>
				</dl>
				
				<!-- ::after -->
			</div>
			<div class="pages">
				 <ul>
					 <li>
						  <a class="current">1</a>
						  <a href="/hunpin/?p=2">2</a>
						  <a href="/hunpin/?p=3">3</a>
						  <a href="/hunpin/?p=4">4</a>
						  <a href="/hunpin/?p=5">5</a>
						  <a href="/hunpin/?p=6">6</a>
						  <a href="/hunpin/?p=7">7</a>
						  <a href="/hunpin/?p=8">8</a>
						  <a href="/hunpin/?p=9">9</a>
						  <a href="/hunpin/?p=10">10</a>
						   ...
						<a href="/hunpin/?p=33">33</a>
					</li>
				</ul>
				 <span class="prev">
					 <a rel="nofollow" href="/hunpin/?p=2">下一页 &gt;</a>
					</span>
				</div>
		</div>
		<div class="content-right fl">
			<h4>热卖婚品</h4>
			<div class="ctr-hotlist clearfix">
				<dl v-for="(item,i) in hot.slice(0,5)" :key="i">
					<dt>
						<router-link rel="nofollow" to="/shoppinglist" target="_blank">
							<img :src="item.img" :alt="item.title">
						</router-link>
					</dt>
					<dd>
						<p>
							<a rel="nofollow" href="" target="-blank">{{item.title}}</a>
						</p>
						<p class="price clearfix">
							<i class="fl">
								¥
								<em>{{item.price}}</em>
							</i>
							<span class="fr">
								<!-- ::before -->
								5221
							</span>
							<!-- ::after -->
						</p>
					</dd>
				</dl>
			</div>
		</div>
	</div>
	<my-footer></my-footer>
</div>
</template>

<script>
export default {
	data(){
		return {
			cates:[],   //所有分类集合 [分类1,分类2,....]
			subcats:[],  //所有分类下的子分类集合[[子类1,子类2],[子类1,子类2],....]
			commodity:[], //所有商品集合[商品1,商品2,...]
			hot:[],//所有热卖推荐[商品1,商品2,...]
		}
	},
	methods:{
		// 加载首页用品类别
		loadCategory(){
			this.axios.get('/shopping/category').then(res=>{
				this.axios.get(`/shopping/categoryall`).then(allres=>{
					this.cates=res.data;
					var i=0;
					this.cates.forEach(item => {
						// console.log(item.cname)
						var arr=[];
						// console.log(allres.data)
						allres.data.forEach(items=>{
							if(items.cname==item.cname){
								arr.push(items)
							}
						})
						this.subcats[i]=arr;
						i++;
						console.log(arr)
					});
					console.log(res.data,allres.data,this.cates,this.subcats)
					// this.subcats.push(res.data);
				// console.log(this.subcats)
			})
			})
		},
		// 加载所有商品
		loadCommodity(){
			this.axios.get(`/shopping/index`).then(res=>{
				this.commodity=res.data;
			})
		},
		// 加载右侧热卖婚品
		loadHot(){
			this.axios.get(`/shopping/hot`).then(res=>{
				this.hot=res.data;
			})
		},

	},
	mounted(){
		// 加载首页用品类别
		this.loadCategory();
		// 加载所有商品
		this.loadCommodity();
		// 加载右侧热卖婚品
		this.loadHot();
		document.title="婚品采购"
	}
}
</script>



<style scoped>
	.breadcrumb {width: 1200px; margin: 20px auto 0 auto; text-align: left; font-size: 14px;}
	.breadcrumb a{color: #666;}
	.breadcrumb a:hover{color: #ff5c5c;}
    .content {
    padding: 24px 0 0px 0;
    width: 1200px;
    margin: 0 auto;
}
.clearfix {
    overflow: hidden;
}
.content-left {
    width: 1000px;
}
.fl {
    float: left;
}
div{
	margin: 0;
	padding: 0;
	font-weight: normal;
	border: 0;
    font-size: 100%;
    font: inherit;
	box-sizing: content-box;
}
.newbox-0617 {
    width: 981px;
    margin-right: 20px;
    /* margin-bottom: 20px; */
    overflow: hidden;
    padding-bottom: 20px;
}
.tag0617-box1 {
    width: 280px;
    height: 80px;
    border: 1px solid transparent;
    padding: 20px;
    float: left;
    margin-top: 5px !important;
    background: #f5f5f5;
    margin-right: 5px;
}
body a {
    color: #666;
    text-decoration: none;
    cursor: pointer;
}
.shop_category_img {
    width: 80px;
    height: 80px;
    margin-right: 5px;
}
img {
    border: none;
    vertical-align: middle;
}
.tag0617-box1 dl {
    width: 180px;
    float: right;
}
dl, dt, dd, ul, ol, li, form, span, a, input, p {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
body a {
    color: #666;
    text-decoration: none;
    cursor: pointer;
}
.tag0617-box1 dd div {
    width: 100%;
    float: left;
}
.tag0617-box1 dd a {
    color: #999;
    padding: 0 14px;
    border-right: 1px solid #ccc;
    line-height: 12px;
    float: left;
    margin-top: 8px;
    font-size: 12px;
}
.tag0617-box1 dd div a:last-child {
    border-right: 0;
}
.ctl-header {
    background: #f8f8f8;
    width: 968px;
    border: 1px solid #e8e8e8;
    margin-bottom: 20px;
}
div{
	margin: 0;padding: 0;
	font-weight: normal;
}
.ctl-header .leihz1 {
    float: left;
    line-height: 34px;
}
dd, ul, ol, li, form, span, a, input, p {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.ctl-header .leihz1 a.on {
    color: #ff5c5c;
}
.ctl-header .leihz1 a {
    padding: 0 10px;
    margin: 0 10px;
    color: #666;
    cursor: pointer;
    line-height: 12px;
}
body a{
	text-decoration: none;
}
.ctl-header .leihz1 span.hLine {
    background: #ccc;
    width: 1px;
    height: 12px;
    display: inline-block;
}
.clearfix:after {
    display: block;
    content: "\20";
    clear: both;
    height: 0;
}
.clear{
	overflow: hidden;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, input, textarea, p, blockquote {
    margin: 0;
    padding: 0;
    /* font-size: 100%; */
    font-weight: normal;
}
.ctl-hplist dl {
    width: 220px;
    margin: 0px 30px 30px 0px;
    float: left;
}
dl, dt, dd, ul, ol, li, form, span, a, input, p {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
body a {
    color: #666;
    text-decoration: none;
    cursor: pointer;
}
.ctl-hplist dl dt img {
    width: 220px;
    height: 220px;
}
img {
    border: none;
    vertical-align: middle;
}
.ctl-hplist dl dd {
    padding: 10px;
    border: 1px solid #e8e8e8;
    border-top: 0;
}
.ctl-hplist dl dd p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ctl-hplist dl dd p a {
    font-size: 14px;
    color: #333;
}
body a {
    text-decoration: none;
    cursor: pointer;
}
.ctl-hplist dl dd p.price {
    height: 24px;
    line-height: 24px;
    padding-top: 5px;
}
.ctl-hplist dl dd p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ctl-hplist dl dd p.price i {
    color: #ff5c5c;
}
.fl {
    float: left;
}
.ctl-hplist dl dd p.price i em {
    font-size: 18px;
}
em, i, cite {
    font-style: normal;
}
span, b, i, em {
    display: inline-block;
}
.ctl-hplist dl dd p.price span {
    color: #999;
    font-size: 12px;
}
.fr {
    float: right;
}
.ctl-hplist dl dd p.price span:before {
    width: 12px;
    height: 12px;
    content: "";
    background: url(http://qnm.hunliji.com/o_1ae6le65l1sidplq1nqtsrksab7.png) no-repeat 0px -1px;
    margin-right: 5px;
    margin-top: 6px;
    float: left;
}
*, :after, :before {
    box-sizing: content-box;
}
.clearfix:after {
    display: block;
    content: "\20";
    clear: both;
    height: 0;
}
.pages {
	padding-top: 20px;
	text-align: center;
	width: 1200px;
	margin: 0 auto;
	clear: both;
	/* padding-bottom: 80px; */
}
div, ul,li {
    margin: 0;
    padding: 0;
    font-weight: normal;
}
.pages ul{
	width: auto;
	display: inline-block;
}
ul{
	list-style: none;
}
ul,li,span,a{
	margin: 0;padding: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
ul, li {
    list-style: none outside none;
}
.pages ul a.current {
	background: #ff5c5c;
	color: #fff;
	border: 1px solid #ff5c5c;
	z-index: 1;
}
.pages ul a:first-child{
	margin-left: 0;
}
.pages ul a{
	line-height: 34px;
	min-width: 34px;
	display: inline-block;
	position: relative;
}
body a{
	color: #666;
	text-decoration: none;
	cursor: pointer;
}
.pages ul a {
    line-height: 34px;
    min-width: 34px;
    display: inline-block;
    margin-left: -1px;
    border: 1px solid #e7e7e7;
    position: relative;
}
.pages span {
    width: 78px;
    height: 34px;
    border: 1px solid #e7e7e7;
    line-height: 34px;
    color: #666;
}
.content-right {
    width: 200px;
}
.fl {
    float: left;
}
.content-right h4 {
    font-size: 20px;
    color: #333;
    border-left: 3px solid #ff5c5c;
    padding-left: 10px;
    line-height: 20px;
}
h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-weight: normal;
}
.ctr-hotlist dl {
    width: 200px;
    float: left;
    margin-top: 20px;
}
.ctr-hotlist dl dt img {
    width: 200px;
    height: 200px;
}
img {
    border: none;
    vertical-align: middle;
}
.ctr-hotlist dl dd {
    padding: 6px 10px;
    border: 1px solid #e8e8e8;
}
dl, dt, dd, ul, ol, li, form, span, a, input, p {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
dd,p{
	font-weight: normal;
}
.ctr-hotlist dl dd p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ctr-hotlist dl dd p a {
    color: #333;
}
body a {
    text-decoration: none;
    cursor: pointer;
}
.ctr-hotlist dl dd p.price {
    height: 24px;
    line-height: 24px;
}
.ctr-hotlist dl dd p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ctr-hotlist dl dd p.price i {
    color: #ff5c5c;
}
.fl {
    float: left;
}
.ctr-hotlist dl dd p.price i em {
    font-size: 17px;
}
.ctr-hotlist dl dd p.price span {
    color: #999;
    font-size: 12px;
}
.fr {
    float: right;
}
.ctr-hotlist dl dd p.price span:before {
    width: 12px;
    height: 11px;
    content: "";
    background: url(http://qnm.hunliji.com/o_1adsk182i14p4vci9mn1pdr1o59c.png);
    margin-right: 5px;
    margin-top: 6px;
    float: left;
}

</style>